<template>
	<view class="content">
		<view v-if="smsList==''">
			暂无消息
		</view>
		<view class="sms-body" v-for="(item,i) in smsList" :key="item.id" @click="ydSms(i)">
			<view class="sms-img">
				<image class="img" :src="'http://localhost:4567/messy_json/img?path='+item.img" mode="aspectFit"></image>
			</view>
			<view class="content">
				{{item.content}}
			</view>
			<view class="create-time">
				发送时间：{{item.createTime}}
			</view>
			<view class="status">
				<text class="text" v-if="item.status!=0">已读</text>
				<text class="text" v-else>未读</text>
				<view v-if="item.status!=0" class="round" style="background-color: #4CD964;"> </view>
				<view v-else class="round" style="background-color: red;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				smsList: [],
				token: ""
			}
		},
		onLoad() {
			this.getSmsList();
		},
		onPullDownRefresh() {
			this.getSmsList();
			},
		methods: {
			
			ydSms(i) {
				var t = this;
				uni.request({
					url: "http://localhost:4567/user_json/smsYd.opera/" + t.smsList[i].id,
					header: {
						"token": t.token,
					},
					method: "POST",
					success: (res) => {
						t.$set(t.smsList[i], "status", 1);
					},
					fail: (res) => {
						uni.removeStorage({
							key: 'token',
							success: function(res) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						});
					}
				});
			},
			getSmsList() {
				var t = this;
				uni.getStorage({
					key: 'token',
					success: function(storage) {
						t.token = storage.data.tokenName;
						var json = JSON.parse(storage.data.message);
						uni.request({
							url: "http://localhost:4567/user_json/sms.json/" + json.id,
							header: {
								"token": storage.data.tokenName,
							},
							method: "POST",
							success: (res) => {
								t.smsList = res.data;
								console.log(t.smsList);
							},
							fail: (res) => {
								uni.removeStorage({
									key: 'token',
									success: function(res) {
										uni.navigateTo({
											url: '/pages/login/login'
										});
									}
								});
							}
						});
					},
					fail: function(res) {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.sms-body {
		width: 90%;
		margin: 10% auto;
		padding: 10rpx 10rpx 40rpx 10rpx;
		border: 1px #C0C4CC solid;
		border-radius: 10rpx;

		.sms-img {
			width: 100%;
			border-bottom: 1px #C0C4CC solid;

			.img {
				width: 100%;
			}
		}

		.content {
			margin-top: 30rpx;
		}

		.create-time {
			font-size: 20rpx;
			color: #C0C4CC;
		}

		.status {
			font-size: 20rpx;
			color: #C0C4CC;
			float: right;

			.text {
				margin-right: 10rpx;
			}
		}
	}

	.round {
		border-radius: 50%;
		display: inline-block;
		width: 20rpx;
		height: 20rpx;
		text-align: center;
	}
</style>
